<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">
	<ui:define name="centro">

		<style>
.alignTop td {
	vertical-align: top;
}

.customTxtWidth200px .ui-inputfield .ui-inputtext .ui-widget {
	width: 200px !important;
}
</style>


		<h:form id="form">
			<p:growl id="msgs" showDetail="true" />
			<p:panel header="Cadastro de Categorias">
				<f:facet name="actions">
					<h:commandLink
						styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"
						title="Ajuda" onclick="dlg.show(); return false;">
						<h:outputText styleClass="ui-icon ui-icon-help" />
					</h:commandLink>
				</f:facet>

				<p:dialog header="Ajuda" widgetVar="dlg">
					<h:outputText value="#{categoryBean.help}" escape="false" />
				</p:dialog>

				<h:outputText value="1-Selecione a categoria para adicionar ou atualizar um subitem a categoria ou vá para o passo 2 para criar uma nova categoria."/>
				<br />
				<br />
				<h:outputText value="Categoria"/>
				<h:panelGrid columns="4" cellpadding="5"
					styleClass="top-aligned-columns">


					<p:tree value="#{categoryBean.root}" var="node" dynamic="false"
						selectionMode="single" expandAnim="FADE_IN"
						collapseAnim="FADE_OUT" selection="#{categoryBean.selectedNode}">
						<p:treeNode>
							<h:outputText value="#{node.getDescription()}" />
						</p:treeNode>
					</p:tree>
					<h:panelGrid columns="10" cellpadding="5"
						columnClasses="alignTop,alignTop">

						<p:outputLabel for="txtCategory"
							value="2-Adicione uma descrição: " />
						<p:inputText id="txtCategory" value="#{categoryBean.menuNewName}"
							styleClass="customTxtWidth200px" />
				
					<p:commandButton value="Adicionar" update="@form"
						action="#{categoryBean.menuAdd()}" icon="ui-icon-plusthick">
					</p:commandButton>
					<p:commandButton value="Atualizar" update="@form"
						action="#{categoryBean.menuUpdate()}" icon="ui-icon-disk"/>
					<p:commandButton value="Limpar" update="@form"
						action="#{categoryBean.menuClear()}" icon="ui-icon-document"
						resetValues="true"/>
				
					</h:panelGrid>
				</h:panelGrid>

				<p:separator />
				<h:outputText value="Selecione uma categoria ou uma subcategoria acima para ser excluída:" />
				<h:panelGrid columns="5" style="margin-top:2;border:none">

					<p:commandButton value="Excluir" update="@form"
						onclick="confirmaExclusao.show()" >
					</p:commandButton>

				</h:panelGrid>
			</p:panel>

		</h:form>
		
		<p:confirmDialog id="confirmaExclusao"
			message="Confirma exclusão desta categoria ?" header="Confirmação"
			severity="alert" widgetVar="confirmaExclusao" modal="true"
			appendTo="@(body)">
			<h:form>
				<p:commandButton id="confirmaBtn" value="Sim"
					onclick="confirmaExclusao.hide()"
					action="#{categoryBean.menuDelete()}" ajax="false"
					icon="ui-icon-check">
				</p:commandButton>
				<p:commandButton id="recusaBtn" value="Não"
					onclick="confirmaExclusao.hide()" icon="ui-icon-close" />
			</h:form>
		</p:confirmDialog>
		
	</ui:define>
</ui:decorate>
</html>
